<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
	<div id="main1" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
/* ================================================================================== */		
		// Schema:
		// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
		var myChart1 = echarts.init(document.getElementById('main1'));
		
		var dataBJ = [
		    [55,9,56,0.46,18,6,1],
		    [25,11,21,0.65,34,9,2],
		    [56,7,63,0.3,14,5,3],
		    [33,7,29,0.33,16,6,4],
		    [42,24,44,0.76,40,16,5],
		    [82,58,90,1.77,68,33,6],
		    [74,49,77,1.46,48,27,7],
		    [78,55,80,1.29,59,29,8],
		    [267,216,280,4.8,108,64,9],
		    [185,127,216,2.52,61,27,10],
		    [39,19,38,0.57,31,15,11],
		    [41,11,40,0.43,21,7,12],
		    [64,38,74,1.04,46,22,13],
		    [108,79,120,1.7,75,41,14],
		    [108,63,116,1.48,44,26,15],
		    [33,6,29,0.34,13,5,16],
		    [94,66,110,1.54,62,31,17],
		    [186,142,192,3.88,93,79,18],
		    [57,31,54,0.96,32,14,19],
		    [22,8,17,0.48,23,10,20],
		    [39,15,36,0.61,29,13,21],
		    [94,69,114,2.08,73,39,22],
		    [99,73,110,2.43,76,48,23],
		    [31,12,30,0.5,32,16,24],
		    [42,27,43,1,53,22,25],
		    [154,117,157,3.05,92,58,26],
		    [234,185,230,4.09,123,69,27],
		    [160,120,186,2.77,91,50,28],
		    [134,96,165,2.76,83,41,29],
		    [52,24,60,1.03,50,21,30],
		    [46,5,49,0.28,10,6,31]
		];
		
		var dataGZ = [
		    [26,37,27,1.163,27,13,1],
		    [85,62,71,1.195,60,8,2],
		    [78,38,74,1.363,37,7,3],
		    [21,21,36,0.634,40,9,4],
		    [41,42,46,0.915,81,13,5],
		    [56,52,69,1.067,92,16,6],
		    [64,30,28,0.924,51,2,7],
		    [55,48,74,1.236,75,26,8],
		    [76,85,113,1.237,114,27,9],
		    [91,81,104,1.041,56,40,10],
		    [84,39,60,0.964,25,11,11],
		    [64,51,101,0.862,58,23,12],
		    [70,69,120,1.198,65,36,13],
		    [77,105,178,2.549,64,16,14],
		    [109,68,87,0.996,74,29,15],
		    [73,68,97,0.905,51,34,16],
		    [54,27,47,0.592,53,12,17],
		    [51,61,97,0.811,65,19,18],
		    [91,71,121,1.374,43,18,19],
		    [73,102,182,2.787,44,19,20],
		    [73,50,76,0.717,31,20,21],
		    [84,94,140,2.238,68,18,22],
		    [93,77,104,1.165,53,7,23],
		    [99,130,227,3.97,55,15,24],
		    [146,84,139,1.094,40,17,25],
		    [113,108,137,1.481,48,15,26],
		    [81,48,62,1.619,26,3,27],
		    [56,48,68,1.336,37,9,28],
		    [82,92,174,3.29,0,13,29],
		    [106,116,188,3.628,101,16,30],
		    [118,50,0,1.383,76,11,31]
		];
		
		var dataSH = [
		    [91,45,125,0.82,34,23,1],
		    [65,27,78,0.86,45,29,2],
		    [83,60,84,1.09,73,27,3],
		    [109,81,121,1.28,68,51,4],
		    [106,77,114,1.07,55,51,5],
		    [109,81,121,1.28,68,51,6],
		    [106,77,114,1.07,55,51,7],
		    [89,65,78,0.86,51,26,8],
		    [53,33,47,0.64,50,17,9],
		    [80,55,80,1.01,75,24,10],
		    [117,81,124,1.03,45,24,11],
		    [99,71,142,1.1,62,42,12],
		    [95,69,130,1.28,74,50,13],
		    [116,87,131,1.47,84,40,14],
		    [108,80,121,1.3,85,37,15],
		    [134,83,167,1.16,57,43,16],
		    [79,43,107,1.05,59,37,17],
		    [71,46,89,0.86,64,25,18],
		    [97,71,113,1.17,88,31,19],
		    [84,57,91,0.85,55,31,20],
		    [87,63,101,0.9,56,41,21],
		    [104,77,119,1.09,73,48,22],
		    [87,62,100,1,72,28,23],
		    [168,128,172,1.49,97,56,24],
		    [65,45,51,0.74,39,17,25],
		    [39,24,38,0.61,47,17,26],
		    [39,24,39,0.59,50,19,27],
		    [93,68,96,1.05,79,29,28],
		    [188,143,197,1.66,99,51,29],
		    [174,131,174,1.55,108,50,30],
		    [187,143,201,1.39,89,53,31]
		];
		
		var lineStyle = {
		    normal: {
		        width: 1,
		        opacity: 0.5
		    }
		};
		
	 var option1 = {
		    backgroundColor: '#161627',
		    title: {
		        text: 'AQI - 雷达图',
		        left: 'center',
		        textStyle: {
		            color: '#eee'
		        }
		    },
		    legend: {
		        bottom: 5,
		        data: ['北京', '上海', '广州'],
		        itemGap: 20,
		        textStyle: {
		            color: '#fff',
		            fontSize: 14
		        },
		        selectedMode: 'single'
		    },
		    // visualMap: {
		    //     show: true,
		    //     min: 0,
		    //     max: 20,
		    //     dimension: 6,
		    //     inRange: {
		    //         colorLightness: [0.5, 0.8]
		    //     }
		    // },
		    radar: {
		        indicator: [
		            {name: 'AQI', max: 300},
		            {name: 'PM2.5', max: 250},
		            {name: 'PM10', max: 300},
		            {name: 'CO', max: 5},
		            {name: 'NO2', max: 200},
		            {name: 'SO2', max: 100}
		        ],
		        shape: 'circle',
		        splitNumber: 5,
		        name: {
		            textStyle: {
		                color: 'rgb(238, 197, 102)'
		            }
		        },
		        splitLine: {
		            lineStyle: {
		                color: [
		                    'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
		                    'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
		                    'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
		                ].reverse()
		            }
		        },
		        splitArea: {
		            show: false
		        },
		        axisLine: {
		            lineStyle: {
		                color: 'rgba(238, 197, 102, 0.5)'
		            }
		        }
		    },
		    series: [
		        {
		            name: '北京',
		            type: 'radar',
		            lineStyle: lineStyle,
		            data: dataBJ,
		            symbol: 'none',
		            itemStyle: {
		                color: '#F9713C'
		            },
		            areaStyle: {
		                opacity: 0.1
		            }
		        },
		        {
		            name: '上海',
		            type: 'radar',
		            lineStyle: lineStyle,
		            data: dataSH,
		            symbol: 'none',
		            itemStyle: {
		                color: '#B3E4A1'
		            },
		            areaStyle: {
		                opacity: 0.05
		            }
		        },
		        {
		            name: '广州',
		            type: 'radar',
		            lineStyle: lineStyle,
		            data: dataGZ,
		            symbol: 'none',
		            itemStyle: {
		                color: 'rgb(238, 197, 102)'
		            },
		            areaStyle: {
		                opacity: 0.05
		            }
		        }
		    ]
		};
		 myChart1.setOption(option1);
        
    </script>
</body>
</html>
